import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import axios from '../api'
import xyz from './xyz'

import echarts from 'echarts';

export default class DailySta extends Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      ageOption: {
        radiusAxis: {
          type: 'category', data: [], z: 10,
          // axisTick: { show: false },
          // splitLine:{show:false},
        },
        angleAxis: {
          clockwise: false,
          axisTick: { show: false },
          axisLabel: { show: false },
          splitLine: { show: false },
        },
        polar: {},
        series: []
      },
      genderOption: {
        series: []
      }
    };
  }

  componentWillMount () {
    echarts.registerTheme('xyz', xyz);
  }

  componentDidMount () {
    this.tick()
    this.timerID = setInterval(
      () => this.tick(),
      15 * 60 * 1000
    );
  }

  componentWillUnmount () {
    clearInterval(this.timerID);
  }

  tick () {
    axios.get('/user_sta').then(({ data: { age, gender, total } }) => {
      this.genData(age, gender, total)
    })

  }

  genData (age, gender, total) {
    age = age.sort((a, b) => a.value - b.value)
    const { ageOption, genderOption } = this.state
    const genAgeData = (data, rest = false) => ({
      type: 'bar',
      stack: 'age',
      left: 0,
      // label:{show:true,formatter: '{b}'},
      data: data.map(({ name, value }) => ({ name, value: rest && value ? (100 - value) : value, itemStyle: { barBorderRadius: 10 } })),
      coordinateSystem: 'polar',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: rest ? 'rgba(255,255,255,0.1)' : '#4702DE' },
            { offset: 1, color: rest ? 'rgba(255,255,255,0.1)' : '#16B6FD' }],
          globalCoord: false
        }
      }
    })
    const ageSeries = [genAgeData(age), genAgeData(age, true)]
    const cateList = age.map(item => ({
      value: item.value ? `______${item.name} ${item.value}%` : '',
      label: { show: true }
    }))

    const genGenderData = (data, focus, center, color, radius = ['55%', '70%'], defaultColor = 'transparent', zlevel = 1) => ({
      type: 'pie',
      avoidLabelOverlap: false,
      radius,
      center,
      zlevel,
      data: data.map(({ name, value }) => ({
        name: `${value}%\n${name}`,
        value,
        label: { position: 'center', show: name === focus, color: '#fff' },
        itemStyle: { color: name === focus ? color : defaultColor }
      }))
    })
    const genderSeries = [
      genGenderData(gender, '女性', ['30%', '50%'], '#ED1964'),
      genGenderData(gender, 'default', ['30%', '50%'], '#1F3071', ['62%', '63%'], '#1F3071', 0),
      genGenderData(gender, '男性', ['70%', '50%'], '#1AA9FB'),
      genGenderData(gender, 'default', ['70%', '50%'], '#1F3071', ['62%', '63%'], '#1F3071', 0),]

    this.setState({
      total,
      ageOption: Object.assign({}, ageOption, {
        series: ageSeries,
        radiusAxis: {
          type: 'category',
          data: cateList,
          z: 10,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: true,
            fontSize: 10,
            align: 'left',
            margin: -20
          },
        }
      }),
      genderOption: Object.assign({}, genderOption, { series: genderSeries })
    })
  }

  render () {
    return (
      <div className="daily-sta">
        <div className="daily-sta__lg">
          <ReactEcharts
            option={this.state.ageOption}
            notMerge={true}
            lazyUpdate={true}
            style={{ height: '100%' }}
            theme={'xyz'} />
        </div>
        <div className="daily-sta__total">
          <div className="daily-sta__total-title">总人数</div>
          <div className="daily-sta__total-number">{this.state.total} 人</div>
        </div>
        <div className="daily-sta__sm">
          <ReactEcharts
            option={this.state.genderOption}
            notMerge={true}
            lazyUpdate={true}
            style={{ height: '100%' }}
            theme={'xyz'} />
        </div>
      </div>
    )
  }
}